<template>
	<!-- 底部 -->
	<div class="wrap">
		<div class="foot">
			<!-- 底部上半部分 -->
			<div class="foot_top">
				<!-- 底部左 -->
				<div class="foot_left">
					<img class="foot_logo" src="./img/logo.png" alt="" />
					<div class="left_cont">
						<div class="left_list" v-for="item in list1" :key="item.text">
							<img class="left_img" :src="item.img" />
							<div>{{ item.text }}</div>
						</div>
					</div>
				</div>
				<!-- 底部中 -->
				<div class="foot_center">
					<div class="center_title">快捷入口</div>
					<div class="center_cont">
						<div class="center_ul" v-for="item in list2" :key="item.title">
							<a class="center_ul_title">{{ item.title }}</a>
							<div class="center_ul_li">
								<a>{{ item.a1 }}</a>
								<a>{{ item.a2 }}</a>
								<a>{{ item.a3 }}</a>
								<a>{{ item.a4 }}</a>
							</div>
						</div>
					</div>
				</div>
				<!-- 底部右 -->
				<div class="foot_right">
					<div class="right_title">联系我们</div>
					<div class="right_cont">
						<div class="right_cont1">24小时服务热线：</div>
						<div class="right_cont2">400-111-1118</div>
						<div class="right_cont3">服务邮箱：</div>
						<div class="right_cont4">400@bluemoon.com.cn</div>
						<div class="right_cont5">
							<div class="right_list" v-for="item in list3" :key="item.img">
								<img :src="item.img" />
								<div>{{ item.text }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 底部下半部分 -->
			<div class="foot_bottom">
				Copyright 2008© 蓝月亮国际集团有限公司 All Rights Reserved
				<a href="https://beian.miit.gov.cn/" target="_blank">
					粤ICP备06004747号-1
				</a>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			list1: [
				{
					img: require('./img/洁净无忧公众号 0914（最新）.png'),
					text: '洁净无忧公众号',
				},
				{
					img: require('./img/【底部导航】至尊洗衣APP.png'),
					text: '至尊洗衣App',
				},
				{
					img: require('./img/【底部导航】蓝月亮官方微博.png'),
					text: '蓝月亮官方微博',
				},
			],
			list2: [
				{
					title: '首页',
					a1: '',
					a2: '',
					a3: '',
					a4: '',
				},
				{
					title: '走进蓝月亮',
					a1: '关于我们',
					a2: '企业文化',
					a3: '企业职责',
					a4: '新闻动态',
				},
				{
					title: '洁净之家',
					a1: '',
					a2: '',
					a3: '',
					a4: '',
				},
				{
					title: '科学洗涤',
					a1: '',
					a2: '',
					a3: '',
					a4: '',
				},
				{
					title: '加入我们',
					a1: '',
					a2: '',
					a3: '',
					a4: '',
				},
				{
					title: '投资者关系',
					a1: '信息公告',
					a2: '企业治理',
					a3: '投资者联络',
					a4: '分析师名单',
				},
				{
					title: '联系我们',
					a1: '总部信息',
					a2: '供应商注册',
					a3: '',
					a4: '',
				},
			],
			list3: [
				{
					img: require('./img/JD.png'),
					text: '京东',
				},
				{
					img: require('./img/tm.png'),
					text: '天猫',
				},
				{
					img: require('./img/sn.png'),
					text: '苏宁易购',
				},
			],
		}
	},
}
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
ul,
li {
	list-style: none;
}
a {
	text-decoration: none;
}
.wrap {
	// 底部
	.foot {
		background: #f4f4f4;
		padding: 80px 0 54px;
		color: #666;
		font-size: 12px;
		// 底部上半部分
		.foot_top {
			max-width: 85vw;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			padding-bottom: 39px;
			border-bottom: 1px solid #e5e5e5;
			font-weight: 400;
			// 底部左
			.foot_left {
				position: relative;
				font-weight: 400;
				.foot_logo {
					width: 144px;
					margin-bottom: 10px;
				}
				.left_cont {
					display: flex;
					flex-wrap: wrap;
					width: 270px;
					.left_list {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-top: 18px;
						margin-right: 26px;
						.left_img {
							width: 62px;
							margin-bottom: 14px;
						}
						div {
							width: 103px;
							text-align: center;
							word-wrap: break-word;
						}
					}
				}
				&::after {
					content: '';
					display: block;
					position: absolute;
					top: 40px;
					height: 217px;
					width: 1px;
					background: #e5e5e5;
					right: 0;
				}
			}
			// 底部中
			.foot_center {
				width: 618px;
				padding-top: 40px;
				margin-left: 22px;
				.center_title {
					font-weight: 800;
					color: #333;
					font-size: 18px;
				}
				.center_cont {
					display: flex;
					justify-content: space-around;
					margin-top: 19px;
					.center_ul {
						margin-left: 8px;
						margin-right: 5px;
						.center_ul_title {
							font-size: 16px;
							border-bottom: 1px solid #e5e5e5;
							cursor: default;
							width: fit-content;
							margin-bottom: 13px;
							font-weight: 800;
							color: #333;
						}
						.center_ul_li {
							a {
								font-size: 14px;
								cursor: pointer;
								margin-top: 12px;
								display: block;
								color: #333;
							}
						}
					}
				}
			}
			// 底部右
			.foot_right {
				width: 190px;
				margin-left: 30px;
				padding-top: 40px;
				padding-left: 22px;
				position: relative;
				.right_title {
					font-size: 18px;
					color: #333;
					font-weight: 800;
				}
				.right_cont {
					margin-left: 8px;
					.right_cont1 {
						font-size: 16px;
						color: #666;
						margin-top: 18px;
						margin-bottom: 6px;
					}
					.right_cont2 {
						color: #203c87;
						font-weight: 500;
						word-break: break-all;
						white-space: pre-wrap;
						font-size: 18px;
					}
					.right_cont3 {
						font-size: 16px;
						color: #666;
						margin-top: 18px;
						margin-bottom: 6px;
					}
					.right_cont4 {
						color: #203c87;
						font-weight: 500;
						word-break: break-all;
						white-space: pre-wrap;
						font-size: 16px;
						width: 200px;
					}
					.right_cont5 {
						display: flex;
						align-items: center;
						color: #666;
						margin-top: 16px;
						margin-left: -22px;
						font-size: 14px;
						.right_list {
							cursor: pointer;
							text-align: center;
							img {
								width: 26px;
								margin: 0 22px;
							}
						}
					}
				}
				&::after {
					content: '';
					display: block;
					position: absolute;
					top: 40px;
					height: 217px;
					width: 1px;
					background: #e5e5e5;
					left: 0;
				}
			}
		}
		// 底部下半部分
		.foot_bottom {
			width: 100%;
			text-align: center;
			margin-top: 59px;
			font-weight: 400;
			a {
				user-select: none;
				color: #333;
			}
		}
	}
}
</style>